<template>
 
    <!-- 精选类 -->
    <div class="home-selected">
      <div class="selected">
        <!-- 城市 -->
        <div class="two">
           <div class="selected-top">
              <div class="left">人物</div>
              <div class="right">
                <div class="anniu">
                  <span @click="add(0)" :class="{active:ddf==0}"></span>          
                  <span @click="add(1)" :class="{active:ddf==1}"></span>          
                  <span @click="add(2)" :class="{active:ddf==2}"></span>          
                  <span @click="add(3)" :class="{active:ddf==3}"></span>          
                </div>
                <a href="">更多></a>
              </div>
           </div>
           <div class="selected-bottom" :style="{transform:`translateX(${-ddf*1*1200}px)`}">
            <div class="neir" v-for="item,i in ziran" :key="i">
                <img :src="item.image.medium" alt="">
                <div>{{ item.title }}</div>
                <div class="sheb">设备：<span>{{ item.equipment.name }}</span></div>
                <div><img class="icont" src="../../assets/眼睛.png" alt=""> <span>{{ item.view_count }}</span> <img class="icont" src="../../assets/点赞_块.png" alt=""><span>{{ item.like_count }}</span></div>
                <div class="yonghu">
                  <img class="toux" :src="item.user.avatar.small" alt="">
                  <span>{{ item.user.name }}</span>
                  <span>{{ item.created_at.split('T')[0].replace('-','年').replace('-','月') }}日</span>
                </div>
              </div>
           </div>
        </div>
    
  
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import axios from 'axios'
  const ddf = ref(0)
  const ziran = reactive([])
  // 城市
  name3()
  function name3() {
    axios.get('mySky/api/v2/topics/people/works?lang=zh-Hans&platform=web&device=desktop&filter=featured:true&sort=hot&limit=16&offset=0')
      .then(res => { ziran.push(...res.data.data.items)})
  }

  
  function add(vul){
    ddf.value=vul
  }

  </script>
  
  <style scoped lang="less">
 .home-selected{
    margin-top: 1px;
    padding-top: 40px;
    width: 100%;
    background-color: #e9e9e9;
    .selected{
      width: 1200px;
      margin:0 auto;
      overflow: hidden;
      .two{
        .selected-top{
          margin: 20px;
           display: flex;
           justify-content: space-between;
       
           .right{
            display: flex;
            .anniu{
              margin-right: 50px;
              span{
                display: inline-block;
                margin: 0 8px;
                width: 16px;
                height: 16px;
                background-color: #d3dce6;
                border-radius: 30%;
              }
  
            }
           }
        }
  
        .selected-bottom{
          width: 4800px;
          text-align: left;
          display: flex;
          justify-content: space-between;
          transition: all .5s;
          .neir{
       
            line-height: 20px;
            background-color: #fff;
          img{
            width: 285px;
            height: 190px;
          }
          .icont{
            width: 20px;
            height: 20px;
            vertical-align: bottom;
  
          }
          .sheb{
            margin: 10px 0;
          }
          .yonghu{
            
            padding: 3px 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
              font-size: 14px;
              width: 120px;
              display: inline-block;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space:nowrap;
            }
            .toux{
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
        }
        } 
  
      }
      // 
      // 
      .two2{
        .selected-top{
          margin: 20px;
           display: flex;
           justify-content: space-between;
         
           .right{
            display: flex;
            .anniu{
              margin-right: 50px;
              span{
                display: inline-block;
                margin: 0 8px;
                width: 16px;
                height: 16px;
                background-color: #d3dce6;
                border-radius: 30%;
              }
  
            }
           }
        }
  
        .selected-bottom{
          width: 4800px;
          text-align: left;
          display: flex;
          justify-content: space-between;
          transition: all .5s;
          .neir{
       
            line-height: 20px;
            background-color: #fff;
            div{
                width: 285px;
                overflow: hidden;
              text-overflow: ellipsis;
              white-space:nowrap;
            }
          img{
            width: 285px;
            height: 190px;
          }
          .icont{
            width: 20px;
            height: 20px;
            vertical-align: bottom;
  
          }
          .sheb{
            margin: 10px 0;
          }
          .yonghu{
            
            padding: 3px 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
              font-size: 14px;
              width: 120px;
              display: inline-block;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space:nowrap;
            }
            .toux{
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
        }
        } 
  
      }
    }
  }
  .active{
background-color: #0075f3 !important;
}
  </style>